<template>
    <div style="display: inline-block;" id="nes">
        <canvas id="nes-canvas" ref="nes" width="256" height="240" :style="canvasSty" :key="apple"/>
    </div>
</template>

<script>

import mynes from './nes.js'
export default {
    name:'Nes',
    components:{
        
    },
    data () {
        return {
            img:'',
            canvasSty:{
                width:'466px',
                height:'264px'
            },
            apple:0,
            mynesnow:null
        }
    },
    created(){
        window.onresize =()=> {
            var canvas = document.getElementById('nes-canvas');
            var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen || 
                document.msFullscreenElement || document.fullscreenElement
            );//!document.webkitIsFullScreen都为true。因此用!!
            if (isFull==false) {
                canvas.style.width='466px'
                canvas.style.height='264px'
                this.canvasSty.width='466px'
                this.canvasSty.height='264px'
                setTimeout(()=>{
                    this.canvasSty.width='466px'
                    this.canvasSty.height='264px'
                },100)
            }else{
                canvas.style.width='100%'
                canvas.style.height='100%'
                this.canvasSty.width='100%'
                this.canvasSty.height='100%'
            }
        }
    },
    mounted(){
       //nes.init("nes-canvas", "game.nes",this);
       this.dropFile()
    },
    methods:{
        dropFile() {
            const fs = require('fs')
            document.addEventListener('drop', (e) => {
                e.preventDefault();
                e.stopPropagation();

                for (const f of e.dataTransfer.files) {
                    this.filePath = f.path
                }
                var romData = fs.readFileSync(this.filePath, {encoding: 'binary'});

                this.mynesnow=null
                this.mynesnow=window.MyNes.nes_load_data("nes-canvas",romData ,this)
                console.log(666)
            });
            document.addEventListener('dragover', (e) => {
                e.preventDefault();
                e.stopPropagation();
            });
        },
        init:function(){

        },
        setOff:function(boo){
            
            if(window.audio_ctx){
                window.audio_ctx.close();
            }
        },
        setVolume:function(val){
            
        },
        fullScreen:function(){
            var canvas = document.getElementById('nes');
            canvas.webkitRequestFullscreen()
            canvas.style.width='100%'
            canvas.style.height='100%'
            this.canvasSty.width='100%'
            this.canvasSty.height='100%'
            setTimeout(()=>{
                this.canvasSty.width='100%'
                this.canvasSty.height='100%'
            },200)
        },
    }
}
</script>

<style scoped>

</style>
